import React from 'react';
import {observer} from 'mobx-react';
import loadjs from "loadjs";
import {observable, toJS} from "mobx";

declare var weaEdcBoard:any;
@observer
export default class DataBoard extends React.Component<any, any> {
  @observable loaded = false;
  @observable search: any = null;

  constructor(props) {
    super(props);

    this.loadEdcBoard();
  }

  componentWillReceiveProps(nextProps, nextContext) {
    const {search} = nextProps;
    if (search) {
      this.search = search;
    }
  }

  loadEdcBoard() {
    if (loadjs.isDefined('weaEdcBoard')) {
      this.loaded = true;
      return;
    }

    const libUrl = '/spa/edc/static4engine/board4com/';
    loadjs([
      `${libUrl}index.css`,
      `${libUrl}index.js`,
      '/font/edc/board/iconfont.js',
      '/mobilemode/js/echarts4/echarts.min.js'
    ], 'weaEdcBoard', {
      success: () => {
        this.loaded = true;
      }
    });
  }

  render() {
    const {loaded, search} = this;
    if (!loaded || !search || !weaEdcBoard) {
      return null;
    }

    const {DataBoardWidget} = weaEdcBoard.com;
    return (<DataBoardWidget search={toJS(search)} board={search.dataBoard} rightslide={true}/>);
  }
}
